<template>
  <div class="comment-item" :class="{ child: comment.isChild }">
    <div class="comment-header">
      <router-link
        :to="{
          name: 'user-profile',
          params: { id: comment.userId },
          query: { nickname: comment.userNickname },
        }"
      >
        <img class="avatar" :src="getUserAvatar(comment.userPhoto, comment.userId)" alt="头像" />
      </router-link>
      <router-link
        :to="{
          name: 'user-profile',
          params: { id: comment.userId },
          query: { nickname: comment.userNickname },
        }"
      >
        <div class="nickname">{{ comment.userNickname }}</div>
      </router-link>
      <div class="time">{{ comment.addTime }}</div>
    </div>
    <div class="comment-content">
      <template v-if="comment.isChild && comment.parentNickname">
        <span class="reply-to">回复 @{{ comment.parentNickname }}：</span>
      </template>
      {{ comment.content }}
    </div>
    <div class="comment-actions">
      <button
        v-if="!comment.isChild"
        class="reply-btn"
        @click="$emit('show-reply-input', comment.id)"
      >
        回复
      </button>
      <button
        v-if="comment.userId === currentUserId"
        class="delete-btn"
        @click="$emit('delete-comment', comment, parentComment)"
      >
        删除
      </button>
    </div>
    <!-- 回复输入框 -->
    <div v-if="showReplyInput[comment.id]" class="reply-input-box">
      <textarea v-model="localReplyContent" placeholder="回复内容..." rows="2" />
      <div class="input-actions">
        <button class="submit-btn" @click="submitReply">发布</button>
        <button class="cancel-btn" @click="cancelReply">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue'
import { getUserAvatar } from '@/utils/avatar'

const props = defineProps({
  comment: { type: Object, required: true },
  parentComment: { type: Object, default: null },
  currentUserId: { type: Number, required: true },
  showReplyInput: { type: Object, required: true },
  replyingTo: { type: [Number, null], default: null },
  replyContent: { type: String, default: '' },
})
const emit = defineEmits(['show-reply-input', 'cancel-reply', 'submit-reply', 'delete-comment'])

// 本地管理输入内容，避免直接修改 props
const localReplyContent = ref('')

watch(
  () => props.showReplyInput[props.comment.id],
  (val) => {
    if (val) localReplyContent.value = ''
  },
)

function submitReply() {
  emit('submit-reply', { parent: props.comment, content: localReplyContent.value })
  localReplyContent.value = ''
}
function cancelReply() {
  emit('cancel-reply', props.comment.id)
  localReplyContent.value = ''
}
</script>

<style scoped>
.comment-item {
  margin-bottom: 1.5rem;
  padding-left: 0.2rem;
}
.comment-item.child {
  margin-left: 2.2rem;
  border-left: 2px solid var(--color-border);
  padding-left: 1.2rem;
  background: var(--color-surface, var(--color-input-bg));
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.comment-header .avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--color-primary);
}
.comment-header .nickname {
  font-weight: 500;
  color: var(--color-primary);
  font-size: 1.05rem;
}
.comment-header .time {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}
.comment-content {
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0.5rem 0 0.2rem 0;
  word-break: break-all;
}
.reply-to {
  color: var(--color-primary);
  font-weight: 500;
  margin-right: 0.2rem;
}
.comment-actions {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 0.2rem;
  margin-top: 0.1rem;
}
.reply-btn,
.delete-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  border-radius: 0.25rem;
  transition: color 0.2s;
}
.reply-btn:hover,
.delete-btn:hover {
  color: var(--color-primary);
}
.reply-input-box {
  margin-bottom: 1.2rem;
  background: var(--color-surface, var(--color-input-bg));
  border-radius: 0.4rem;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  padding: 1rem 1rem 0.7rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.reply-input-box textarea {
  width: 100%;
  min-height: 2.2rem;
  font-size: 1rem;
  border: 1px solid var(--color-border-input);
  border-radius: 0.25rem;
  padding: 0.7rem 1rem;
  background: var(--color-surface, var(--color-input-bg));
  color: var(--color-text);
  resize: none;
  transition: border-color 0.2s;
}
.input-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: flex-end;
}
.submit-btn {
  background: var(--color-primary);
  color: var(--color-button-text);
  border: none;
  border-radius: 0.25rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  transition: background 0.2s;
}
.submit-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}
.cancel-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0.6rem 1.2rem;
  border-radius: 0.25rem;
  transition: color 0.2s;
}
.cancel-btn:hover {
  color: var(--color-primary);
}
</style>
